<template>
  <div class="body">
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>

    <!-- <p>{{msg}}</p> -->
  </div>
</template>

<script setup>
import { onUpdated } from 'vue';
import { ref, onBeforeUpdate, computed, watch } from 'vue';

const list = ref(['html', 'css'])

const props = defineProps({
  msg: ''
})

// const list = computed(() => {
//   _list.value.push(props.msg)
//   return [..._list.value]
// })

// watch(
//   () => props.msg,
//   (newVal, oldVal) => {
//     // console.log(newVal);
//     list.value.push(newVal)
//   }
// )


// onBeforeUpdate(() => {
//   // console.log(props.msg);
//   list.value.push(props.msg)
// })

onUpdated(() => {
  // console.log(props.msg);
  // list.value.push(props.msg)
})
</script>

<style lang="css" scoped>

</style>